<template>
  <div>
    <!-- 第一：无传参 -->
    <a @click="fn(e)" href="http://baidu.com">百度</a>

    <!-- 第二：有传参 -->
    <a @click="fn1(12, $event)" href="http://baidu.com">百度</a>

    <!-- 第三：事件修饰符 -->
    <button @click.prevent="fn2">按钮</button>

    <!-- 第四：按键修饰符 -->
    <form @click.prevent.enter="fn3" >
      <input type="text"/>
      <input type="text" />
      <button>提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  /* 第一种：无传参 */
  methods: {
    fn(e) {
      e.preventDefault()
    },

    /* 第二种：有传参 */
    fn1(num, e) {
      e.preventDefault()
    },

    /* 第三种：事件修饰符 直接写到标签上  */
    fn2() {
      console.log(1)
    },
    
    /* 第四种：按键修饰符 */
    fn3(){
     console.log(1);

    }

  },
}
</script>

<style lang="less"></style>
